<template>
	<div class="videoMsg" v-loading="saveUploading.status" :element-loading-text="saveUploading.txt" v-loading.fullscreen.lock="saveUploading.full">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<div class="publishFrom_up">
				<el-form-item label="选择视频" prop="previewVideoUrl">
					<div class="publishFrom_ box video_box">
						<div class="publishFrom_b">
							<i class="ipm video_up"></i>
							<p v-text="ruleForm.previewVideoUrl ? '点击重新上传视频' : '点击上传视频'"></p>
							<p>支持FLV 、MOV、MKV、TS、MP4、AVI、MPG、WMV等格式</p>
						</div>
						<uploader class="uploader-msg" :options="uploadOptionsVideo" :fileList="fileListArry" :autoStart="false" ref="uploaderVideo" :file-status-text="statusText" @files-submitted="fileSubmitVideo" @file-removed="fileRemovedVideo" @file-success="fileSuccessVideo" @file-progress="onFileProgress" @files-added="fileAdded" @file-error="fileFailVideo">
							<uploader-unsupport></uploader-unsupport>
							<uploader-btn :directory="false" v-if="selectFileShowVideo" :attrs="attrsVideo" :single="true">
							</uploader-btn>
							<uploader-list></uploader-list>
							<img v-show="ruleForm.path" class="thumbnail-picture" :src="BASE_URL + '/' +ruleForm.thumbnail_picture" alt="预览图">
							<div class="uploader-close-box" v-show="ruleForm.previewVideoUrl != '' ">
								<!-- <el-button class="uploader-close" @click="videoRemove" type="danger" icon="el-icon-close" circle></el-button> -->
								<label class="el-upload-list__item-status-label" @click="videoRemove">
									<transition name="el-fade-in-linear">
										<i class="el-icon-upload-success el-icon-check"></i>
									</transition>
									<transition name="el-fade-in-linear">
										<i class="el-icon-close"></i>
									</transition>
								</label>
							</div>
						</uploader>
					</div>
				</el-form-item>
				<el-form-item label="封面图片">
					<div class="publishFrom_ box cover_box">
						<img v-show="previewImgUrl" :src="previewImgUrl" class="avatar">
						<div class="publishFrom_b">
							<i class="ipm image_up"></i>
							<div v-show="previewImgUrl"> </div>
							<p v-text="previewImgUrl ? '点击重新上传图片' : '点击上传图片'"></p>
							<p>支持jpg/png/jpeg格式</p>
						</div>
						<uploader class="uploader-msg" :options="uploadOptionsImg" :autoStart="false" ref="uploaderImg" :file-status-text="statusText" @files-submitted="fileSubmitImg" @file-removed="fileRemovedImg" @file-success="fileSuccessImg" @file-error="fileFailImg">
							<uploader-unsupport></uploader-unsupport>
							<template v-if="compParam.editStatus === false">
								<uploader-btn :directory="false" :attrs="attrsImg" :single="true" v-if="!previewImgUrl"></uploader-btn>
							</template>
							<template v-else>
								<uploader-btn :directory="false" :attrs="attrsImg" :single="true" v-if="previewImgUrl" class="uploader-msg-btn">
									<i class="ipm video_up" @click="clearFilet"></i>
								</uploader-btn>
							</template>
							<uploader-list></uploader-list>
							<div class="uploader-close-box" v-show="previewImgUrl != ''">
								<!-- <img v-if="ruleForm.picture !== ''" :src="BASE_URL + ruleForm.picture" class="avatar"> -->
								<!-- <el-button class="uploader-close" @click="pictureRemove" type="danger" icon="el-icon-close" circle></el-button> -->
								<label class="el-upload-list__item-status-label" @click="pictureRemove">
									<transition name="el-fade-in-linear">
										<i class="el-icon-upload-success el-icon-check"></i>
									</transition>
									<transition name="el-fade-in-linear">
										<i class="el-icon-close"></i>
									</transition>
								</label>
							</div>
						</uploader>
					</div>
				</el-form-item>
			</div>
			<el-form-item label="视频名称" prop="name">
				<el-input v-model.trim="ruleForm.name" maxlength="50" placeholder="请输入视频名称"></el-input>
			</el-form-item>

			<el-form-item label="视频分类" prop="cate_id" v-if='$store.state.isCheckLevel'>
				<el-select filterable v-model="ruleForm.cate_id"  placeholder="请选择">
					<el-option v-for="item in classificationList" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>

				<el-button @click='addCate' type='text' class='add-videoCate'>添加分类</el-button>
			</el-form-item>

			<ul>
				<li class="publishFrom_seleck">
					<el-form-item label="授课老师">
						<el-input class="lectureTeacher" type="input" disabled v-model="otherInfo.user_name"></el-input>
					</el-form-item>
					<el-form-item label="视频信息" prop="type">
						<el-select filterable v-model="ruleForm.type" placeholder="请选择">
							<el-option label="公开课" :value="0"></el-option>
							<!-- 					<el-option label="微课" value="1"></el-option> -->
						</el-select>
					</el-form-item>
				</li>
				<template v-if='!$store.state.isSchool'>
					<!--  -->
					<li class="publishFrom_seleck">
						<el-form-item label="学段" prop="study_section_id">
							<el-select filterable v-model="ruleForm.study_section_id" @change="relateChange($event,'study_section')" placeholder="请选择">
								<el-option v-for="item in orgLevel2" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="年级" prop="grade_id">
							<el-select filterable v-model="ruleForm.grade_id" @change="relateChange($event,'grade')" placeholder="请选择">
								<el-option v-for="item in orgLevel3" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</li>
					<!--  -->
					<li class="publishFrom_seleck">
						<el-form-item label="科目" prop="subject_id">
							<el-select filterable v-model="ruleForm.subject_id" @change="relateChange($event,'subject')" placeholder="请选择">
								<el-option v-for="item in orgSubject" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="版本" prop="version_id">
							<el-select filterable v-model="ruleForm.version_id" @change="relateChange($event,'version')" placeholder="请选择">
								<el-option v-for="item in orgVersion" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</li>
					<!--  -->
					<li class="publishFrom_seleck">
						<el-form-item label="教材" prop="material_id">
							<el-select filterable v-model="ruleForm.material_id" @change="relateChange($event,'material')" placeholder="请选择">
								<el-option v-for="item in orgMaterial" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="章" prop="list_1_id">
							<el-select filterable v-model="ruleForm.list_1_id" @change="relateChange($event,'list_1')" placeholder="请选择">
								<el-option v-for="item in orgList1" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</li>
					<!--  -->
					<li class="publishFrom_seleck">
						<el-form-item label="节" prop="list_2_id">
							<el-select filterable v-model="ruleForm.list_2_id" placeholder="请选择">
								<el-option v-for="item in orgList2" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</li>
				</template>
			</ul>
			<el-form-item label="关键字" prop="keyword" class="keywordBox">
				<el-tag :key="index" v-for="(tag,index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
					{{tag}}
				</el-tag>
				<el-input class="keyword" v-if="inputVisible" v-model.trim="inputValue" ref="saveTagInput" size="small" placeholder="请输入关键字,不超4字" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
				</el-input>
				<template v-else>
					<el-button v-if="showBtn" class="button-new-tag" size="small" @click="showInput">+ 关键词</el-button>
				</template>
			</el-form-item>
			<el-form-item label="视频简介" prop="profile">
				<el-input type="textarea" :rows="6" resize="none" maxlength="200" v-model.trim="ruleForm.profile" placeholder="请输入视频简介,不超200字"></el-input>
				<span class="numberWord"><i>{{ ruleForm.profile.length }}</i>/200</span>
			</el-form-item>
			<el-form-item label="课程须知" prop="notice">
				<el-input type="textarea" v-model.trim="ruleForm.notice" :rows="6" resize="none" maxlength="200" placeholder="课程须知,不超200字"></el-input>
				<span class="numberWord"><i>{{ ruleForm.notice.length }}</i>/200</span>
			</el-form-item>
			<!-- <template  v-if="compParam.editStatus === false"> -->
			<template v-if='!$store.state.isSchool'>
				<el-form-item label="是否停顿" prop="stop_time">
					<p class="pause">(自动暂停后需要学生手动点击播放）</p>
					<el-radio-group v-model="ruleForm.stop_time">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
					<span class="pauseVal">
						<el-input-number :precision="0" v-model="pauseVal" :min="0" :max="100" label="请输入" :disabled="isTrue"></el-input-number>
						分钟暂停一次
					</span>
				</el-form-item>
				<el-form-item label="上课班级" prop="class">
					<el-checkbox-group v-model="ruleForm.class">
						<el-checkbox v-for="item in userClass" :label="item.id" :value="item.id" :key="item.id">
							{{ item.rename }}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<!-- <el-form-item label="观看权限">
						<el-button type="primary" size="small" @click="changeAuthority">设置</el-button>
						<div class="allDataBox" v-show="(cNode.length > 0 || selectRole.length > 0 || selectUser.length > 0)">
							<span v-if="limitType == 2">谁可以看</span>
							<span v-else-if="limitType == 3">谁不能看</span>
							<span v-else></span>
							<div class="chaiBox" v-show="limitType != 1">
									<el-tag
										size="small"
										v-for="tag in cNode"
										:key="JSON.stringify(tag)"
										closable type="info"
										@close="closeClass(tag)">
										{{tag.rename}}
									</el-tag>
									<el-tag
										size="small"
										v-for="tag in selectRole"
										:key="JSON.stringify(tag)"
										closable type="info"
										@close="closeRole(tag)">
										{{tag.name}}
									</el-tag>
									<el-tag
										size="small"
										v-for="tag in selectUser"
										:key="JSON.stringify(tag)"
										closable type="info"
										@close="closeUser(tag)">
										{{tag.name}}
									</el-tag>
							</div>
						</div>
				</el-form-item> -->
				<el-form-item label="学分" prop="study_score">
					<el-radio-group v-model="ruleForm.study_score">
						<el-radio :label="0">无</el-radio>
						<el-radio :label="1">1分</el-radio>
						<el-radio :label="2">2分</el-radio>
						<el-radio :label="3">3分</el-radio>
					</el-radio-group>
					<span class="pauseVal">
						<el-input-number :precision="0" v-model="creditVal" :min="0" :max="10" label="请输入" :disabled="isTrue2"></el-input-number>
						学分
					</span>
				</el-form-item>
			</template>
			<el-form-item label="权限" prop="authority">
				<el-radio-group v-model="ruleForm.authority">
					<el-radio :label="1">公开</el-radio>
					<el-radio :label="0">不公开</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="允许下载" prop="is_download">
				<el-radio-group v-model="ruleForm.is_download">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<div class="information clear" v-if="compParam.editStatus">
				<div class="information_l fl">
					<span>
						<i class="ipm but_Collection02_down"></i>
						<p>{{otherInfo.favorite_num}}收藏</p>
					</span>
					<span>
						<i class="ipm jiaoxuezhongxin_icon2"></i>
						<p>{{otherInfo.play_num}}播放</p>
					</span>
					<span>
						<i class="ipm comment01"></i>
						<p>{{otherInfo.comment_num}}评论</p>
					</span>
				</div>
				<div class="information_r fr">
					<p>
						视频得分
						<strong v-if="otherInfo.score !== 0">{{otherInfo.score}}</strong>
						<i v-else>--</i>
					</p>
					<p>上传于 {{otherInfo.upload_time}}</p>
				</div>
			</div>
			<el-form-item class="buttonCSS" label-width="0">
				<el-button type="primary" plain @click="cancel()">取消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
			</el-form-item>
		</el-form>
		<!--  -->
		<el-dialog title="图片设置" :visible.sync="tailorViews" width="1000px" custom-class="Tailoring" :close-on-click-modal="false">
			<div class="tailoring">
				<div class="tailoring_cropper">
					<vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :centerBox="option.centerBox" :high="option.high" :infoTrue="option.infoTrue" :enlarge="option.enlarge">
					</vueCropper>
				</div>
				<div class="buttonCSS cropper_btn">
					<el-button type="primary" @click="clearFilet(1)" plain>取消</el-button>
					<el-button type="primary" @click="finish('base64')">确定</el-button>
				</div>
				<!-- <div class="show-preview">
					<img :src="modelSrc">
				</div> -->
			</div>
		</el-dialog>


		<el-dialog title="视频分类" :visible.sync="classificationViews" width="500px" custom-class="Tailoring5" :close-on-click-modal="false" @close="ificationResetForm('classificationForm')">
			<div class="tailoring333">
					<el-form :model="classificationForm" ref="classificationForm" label-width="100px" class="demo-ruleForm">
					  <el-form-item
					    label="添加分类"
					    prop="name"
					    :rules="[
					      { required: true, message: '内容不能为空'},
					    ]"
					  >
					    <el-input type="text" v-model.trim="classificationForm.name" placeholder="输入视频分类，不超过8个字" maxlength="8"></el-input>
					    <el-button type="primary" @click="ificationSubmitForm('classificationForm')">提交</el-button>
					  </el-form-item >
					  	
					  <el-form-item label="分类管理" class='ificationS'>


					  	<el-tag
					  	v-for="(tag, index) in classificationList"
					  	:key="tag.id"
					  	closable
					  	 @close="videoCateClose(tag.id, index)">
					  	{{tag.name}}
					  </el-tag>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>

		<el-dialog
      title="观看权限"
      :visible.sync="authorityFlag"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="35%"
			:show-close="false"
			center>
      <el-radio-group v-model="limitType" @change="getLimitType" style="padding: 10px 0 10px 0;">
        <el-radio :label="1">不限制</el-radio>
        <el-radio :label="2">谁可以看</el-radio>
        <el-radio :label="3">谁不能看</el-radio>
      </el-radio-group>
      <div v-if="limitType === 2 || limitType === 3" class="contentBox">
        <div class="leftBox">
          <h4>选择</h4>
          <template>
            <el-tabs :tab-position="tabPosition" style="height: 90%;border: 1px solid #EBEEF5;">
              <el-tab-pane label="按班级分" style="height: 295px; overflow: auto;">
                <el-tree
                  :data="classData"
                  :props="defaultProps"
                  show-checkbox
                  @check="getClassArr"
                  ref="tree"
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false">
                </el-tree>
              </el-tab-pane>
              <el-tab-pane label="按角色分">
                <el-checkbox-group v-model="selectRole">
                    <el-checkbox style="display: block;" v-for="item in roleData" :key="item.id" :label="item">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
              <el-tab-pane label="选择用户">
                <el-input type="text" style="margin-bottom: 5px; width:260px;" placeholder="请输入用户名" size="small" v-model.trim="username" clearable @clear="username = ''"></el-input>
                <el-checkbox-group v-model="selectUser" style="height: 260px; overflow: auto;">
                    <el-checkbox style="display: block;" v-for="item in userData" :key="item.id" :ref="item.id" :label="item" v-show="username == '' ? true : item.name.includes(username)">
											<!-- {{item.name}}/{{item.number}} — {{item.role_name}} -->
											<div style="display:flex;justify-content: space-between;">
                        <div style="
                          width: 170px;
                          word-break: keep-all;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        ">
                          {{item.name}} / {{item.number}}
                        </div>
                        <div style="
                          width: 70px;
                          word-break: keep-all;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          padding-left:10px
                        ">
                          {{item.role_name}}
                        </div>
                      </div>
										</el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <div class="rightBox">
          <h4>已选</h4>
          <ul class="tagBox">
            <li>
              <el-tag size="small"
                v-for="tag in cNode"
                :key="JSON.stringify(tag)"
                closable
                @close="closeClass(tag)"
                type="info">
                {{tag.rename}}
              </el-tag>
            </li>
            <li>
              <el-tag size="small"
                v-for="tag in selectRole"
                :key="JSON.stringify(tag)"
                closable
                @close="closeRole(tag)"
                type="info">
                {{tag.name}}
              </el-tag>
            </li>
            <li>
              <el-tag size="small"
                v-for="tag in selectUser"
                :key="JSON.stringify(tag)"
                closable
                @close="closeUser(tag)"
                type="info">
                {{tag.name}}
              </el-tag>
            </li>
          </ul>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="selectOut()">取消</el-button>
        <el-button type="primary" size="small" @click="selectAllin()">确定</el-button>
      </div>
    </el-dialog>
	</div>
</template>
<script>
export default {
	props: ['compParam', 'activeIndex'],
	name: '',
	data() {
		return {
			cNode: [],
			cNodeste: [],
			username: '', // 用户名
			defaultProps: {
				children: 'children',
				label: 'name',
				disabled:'disabled'
			},
			classData: [], // 班级数据
			roleData: [], // 角色数据
			userData: [], // 用户数据
			selectRole: [], // 选中的角色
			selectUser: [], //选中的用户
			tabPosition: '按班级分',
			limitType: 1, // 观看权限 --- 1不限制、2允许、3禁止
			authorityFlag: false,
			classificationViews: false,
			classificationForm: {name: ''},
			previewImgUrl: '',
			editFlag: false,
			thisIndex: '1',
			uploadLimitMax: 0,
			uploadStatus: {
				video: false,
				img: false
			},
			saveUploading: {
				status: false,
				txt: "正在保存...",
				full: false
			},
			selectFileShowVideo: true, //是否显示选择文件按钮
			selectFileShowImg: true, //是否显示选择文件按钮
			uploadOptionsVideo: {
				target: this.BASE_URL + "/api/video/video_upload",
				testChunks: false,
				headers: {
					Authorization: `Bearer ` + this.$g.access_token
				},

			},
			fileListArry: [{ name: '555' }],
			uploadOptionsImg: {
				target: this.BASE_URL + "/api/video/thumbnail_upload",
				testChunks: false,
				headers: {
					Authorization: `Bearer ` + this.$g.access_token
				}
			},
			selectFileOrNotVideo: false, //是否选中文件
			selectFileOrNotImg: false, //是否选中文件
			// uploadOrNot: false, //是否已经上传
			attrsVideo: {
				accept: ['video/*']
			},
			attrsImg: {
				accept: ['image/*']
			},
			statusText: {
				success: "上传成功",
				error: "上传出错",
				uploading: "正在上传...",
				paused: "暂停",
				waiting: "等待上传"
			},
			uploadInfo: {
				file_name: "",
				file_path: "",
				file_size: 0
			},
			orgLevel2Param: { //获取学段参数
				level: 2,
				pid: null,
				direction: 'balance',
			},
			orgLevel3Param: { //获取年纪参数
				level: 3,
				pid: null,
				direction: 'balance',
			},
			orgLevel2: this.$g.orgLevel2,
			orgLevel3: [],
			orgSubject: [],
			orgVersion: [],
			orgMaterial: [],
			orgList1: [],
			orgList2: [],
			orgLevel2Param: { //获取学段参数
				level: 2,
				pid: null,
				direction: 'balance',
			},
			orgLevel3Param: { //获取年纪参数
				level: 3,
				pid: null,
				direction: 'balance',
			},
			subjectParam: { //获取科目,版本，参数
				type: 2,
				org_id: null,
				status: 1,
			},
			versionParam: { //获取科目,版本，参数
				type: 2,
				org_id: null,
				sub_id: null,
				status: 1
			},
			materialParam: { //获取科目,版本，参数
				org_id: null,
				sub_id: null,
				ver_id: null,
				status: 1
			},
			listParam1: {
				pid: 0,
				level: 1,
				material_id: null,
			},
			listParam2: {
				pid: 0,
				material_id: null,
				level: 2,
			},

			dynamicTags: [], //关键词
			inputVisible: false,
			inputValue: '',
			ruleForm: {

				limit_type: 1, // 观看权限 --- 1不限制、2允许、3禁止
				limit_org_id: '', // 班级
				limit_role_id: '', // 角色
				limit_user_id: '', // 用户

				name: undefined, //视频名称
				type: 0, //视频信息
				study_section_id: undefined, //学段
				grade_id: undefined, //年级
				subject_id: undefined, //科目
				version_id: undefined, // 版本
				material_id: undefined, //教材
				list_1_id: undefined, //章
				list_2_id: undefined, //节
				keyword: [], //关键字
				profile: '', //视频简介
				notice: '', //课程须知
				study_score: 0, //学分-自定义
				is_download: 1,
				picture: undefined,
				path: undefined,
				authority: 1,
				previewVideoUrl: '',
				thumbnail_picture: '',
				cate_id: '',

				stop_time: 0, //是否停顿-自定义
				class: [], //上课班级
				create_id: this.$g.user_id,
				// credit: 0, //学分
				// jurisdiction: 1, //权限
			},
			otherInfo: {
				user_name: this.$store.getters.userInfo.name,
				score: 0,
				favorite_num: 0,
				play_num: 0,
				comment_num: 0,
				upload_time: '',

			},
			rules: {
				previewVideoUrl: [
					{ required: true, message: '请选择视频', trigger: 'change' }
				],
				name: [
					{ required: true, message: '请输入视频名称', trigger: 'change' },
					// { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
				],
				type: [
					{ required: true, message: '请选择视频信息', trigger: 'change' }
				],
				study_section_id: [
					{ required: true, message: '请选择学段', trigger: 'change' }
				],
				grade_id: [
					{ required: true, message: '请选择年级', trigger: 'change' }
				],
				// subject_id: [
				// 	{ required: true, message: '请选择科目	', trigger: 'change' }
				// ],
				// version_id: [
				// 	{ required: true, message: '请选择版本', trigger: 'change' }
				// ],
				material_id: [
					{ required: false, message: '请选择教材', trigger: 'change' }
				],
				list_1_id: [
					{ required: false, message: '请选择章', trigger: 'change' }
				],
				list_2_id: [
					{ required: false, message: '请选择节', trigger: 'change' }
				],
				profile: [
					{ min: 0, max: 200, message: '长度在 0 到 200 个字符', trigger: 'change' }
				],
				notice: [
					{ min: 0, max: 200, message: '长度在 0 到 200 个字符', trigger: 'change' }
				],
				cate_id: [
					{ required: true, message: '请选择视频分类', trigger: 'change' }
				],

			},

			classificationList: [],
			userClass: [],
			pauseVal: '', //是否停顿
			creditVal: '', //学分-自定义
			isTrue: true,
			isTrue2: false,

			tailorViews: false,
			modelSrc: '',
			modelView: '',
			previews: '',
			showBtn: true,

			option: {
				img: '',
				size: 1,
				full: false, //full
				outputType: 'png', //输出图片格式
				canMove: true, //能否拖动图片
				fixedBox: true, //截图框固定大小
				original: false, //否显示原始宽高
				canMoveBox: true, //能否拖动截图框
				autoCrop: true, //autoCrop 是否自动生成截图框
				// 只有自动截图开启 宽度高度才生效
				autoCropWidth: 290,
				autoCropHeight: 140,
				centerBox: false, //截图框是否限制在图片里
				high: true //high //是否根据dpr生成适合屏幕的高清图片
			},
			fileData: ''
		}
	},
	created() {
		this.initFunc();
		this.getUserClass()

		this.getClassData();
		this.getRoleData();
		this.getUserData();

			let timer = setTimeout(()=>{this.orgLevel2 = this.$g.orgLevel2; clearTimeout(timer);}, 1000);
		 this.$store.state.isCheckLevel &&  this.getClassification()
	},
	watch: {
		'activeIndex': {
			handler(n) {
				if (n === this.thisIndex) {
					this.initFunc();
				}
			},

		},
		'uploadStatus.video': {
			handler(newVal, oldVal) {
				if (newVal && this.uploadStatus.img) {

					this.saveVideo();
				}
			}
		},
		'uploadStatus.img': {
			handler(newVal, oldVal) {
				if (newVal && this.uploadStatus.video) {
					this.saveVideo();
				}
			}
		},
		'ruleForm.stop_time'(a, b) {
			if (a) {
				this.isTrue = false;
			} else {
				this.isTrue = true;
				this.pauseVal = 0
			}
		},
		'creditVal'(a, b) {
			if (a) {
				this.ruleForm.study_score = ''
			} else {
				this.creditVal = 0
			}
		},
		'ruleForm.study_score'(a, b) {
			if (a) {
				this.creditVal = 0
			} else {
				this.ruleForm.study_score = this.ruleForm.study_score
			}
		},
		'dynamicTags'(newVal, val) {
			newVal.length >= 3 ? this.showBtn = false : this.showBtn = true
		}
	},
	computed: {},
	methods: {
		getCheckVideo(videoid) { // 编辑权限设置
			// console.log(videoid, '0000')
			let params ={
				type: 1,
				type_id: videoid,
			}
			let success = res =>{
				// console.log(res,6666666666)
				this.limitType = res.data.limit_type

				this.cNode = res.data.org_name || []
				this.selectRole = res.data.role_name || []
				this.selectUser = res.data.user_name || []

			}
			this.$ajax.get('api/video/get_check_by_video_id', {params, func: {success}})
		},

		getLimitType(val) {
			// if(!Boolean(this.compParam.id)) {
				for (var i of this.cNode) {
					this.$refs.tree && this.$refs.tree.setChecked(i.id, false);
				}
				this.cNode = []
				this.selectRole = []
				this.selectUser = []
			// }
		},

		changeAuthority() { // 观看权限选择
				this.authorityFlag = true

				this.$nextTick(() => {
					//由于label绑定的是item对象，所以需要做这一层处理
					//org
					for (var i of this.cNode) {
						this.$refs.tree.setChecked(i.id, true);
					}
					//role
					// console.log(this.selectRole, 4444444);
					let s = [];
					for (var j of this.selectRole) {
						for (var m of this.roleData) {
							if (j.id === m.id) {
								s.push(m);
							}
						}
					}
					this.selectRole = s;

					let u = [];
					for (var j of this.selectUser) {
						for (var m of this.userData) {
							if (j.id === m.id) {
								u.push(m);
							}
						}
					}
					this.selectUser = u;
				});
		},
		/** 获取班级 */
		getClassData() {
			let success = res => {
				for (var i of res.data) {
					if(!i.children) {
						i.disabled = true
						continue
					}
					for(var j of i.children) {
						if(!j.children) {
							j.disabled = true
							continue
						}
					}
				}
				// console.log(res.data,'pppp')
				let num = 0
				for(var k of res.data) {
					for (var n of k.children) {
						if(n.disabled) {
							num++
						}
					}
					if(num == k.children.length) {
						k.disabled = true
					}
					num = 0
				}
				this.classData = res.data  
			}
			this.$ajax.get('/api/newlevel/platform_org', {params: {level: 2, direction: 'down'},func: {success}})
		},
		getClassArr() { // 获取 过滤出被选中的班级，
			this.cNodeste = this.$refs.tree.getCheckedNodes();
			this.cNode = this.cNodeste.filter(i => i.rename)
		},
		closeClass(val) { // 删除班级tag选项
			// console.log(val)
			this.cNode = this.cNode.filter(i => i.id !== val.id) // 去右
			this.$refs.tree.setChecked(val.id,false) // 去左
		},
		
		/** 获取角色 */
		getRoleData() {
			let success = res => {
				this.roleData = res.data
				// this.roleData = res.data.filter(item => item.id > 3)
			}
			this.$ajax.get('api/role/get_all_role', {params: {type: 1},func: {success}})
		},
		closeRole(val) { // 删除角色tag选项
				// console.log(val)
				this.selectRole = this.selectRole.filter(item => item.id !== val.id)
		},

		/** 获取用户 */
		getUserData() {
			let success = res => {
					// this.userData = deep_clone(res.data)
          this.userData = res.data.filter(item => item.role_base != 2 && item.role_base != 3)
			}
			this.$ajax.get('api/user/user', {params: {status: 1},func: {success}})
		},
		closeUser(val) {
			this.selectUser = this.selectUser.filter(item => item.id !== val.id)
		},
		selectAllin() { // 获取全部数据
			if(this.limitType == 1) {
        for (var i of this.cNode) {
          this.$refs.tree && this.$refs.tree.setChecked(i.id, false);
        }
        this.cNode = []
        this.selectRole = []
        this.selectUser = []
      }
			this.authorityFlag = false
		},
		selectOut() {
			if(!Boolean(this.compParam.id)) {
					this.cNode.forEach(item =>{
						this.$refs.tree.setChecked(item.id,false)
					})
					this.cNode = []
					this.selectRole = []
					this.selectUser = []
			}else{
        this.getCheckVideo(this.compParam.id)
      }
			this.authorityFlag = false
		},

		videoCateClose(id, index){
			let success =(res)=>{
				this.$message.success(res.msg)
				this.classificationList.splice(index, 1)
			}

			let params = {id: id}
			this.$ajax.delete('api/video/video_cate', { params, func: { success: success} })

			// this.$ajax.delete('api/live/school_live',{params:{id:id},func:{success:success}})
		},
		getvideoCate(){
			let success =(res)=>{
				this.$message.success(res.msg)
				this.getClassification()
			}

			let data = {name: this.classificationForm.name}
			this.$ajax.post('api/video/video_cate',  data, {func: { success: success} })
		},
		addCate(){
			this.classificationViews = true
		},
		ificationSubmitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {

					this.getvideoCate()
					this.$refs[formName].resetFields();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		ificationResetForm(formName){
			this.$refs[formName].resetFields();
			this.classificationViews = false
		},
		getClassification(){

			let success =(res)=>{
				this.classificationList = res.data

				this.classificationList.unshift({name: '全部', id: 0})
			}

			let params = {}
			this.$ajax.get('api/video/video_cate', { params, func: { success: success} })
		},
		pictureRemove() {
			this.$refs.uploaderImg.uploader.cancel();
			this.previewImgUrl = '';
			this.ruleForm.picture = '';
			this.compParam.editStatus = false
		},
		videoRemove() {
			this.$refs.uploaderVideo.uploader.cancel();
			this.ruleForm.path = '';
			this.ruleForm.previewVideoUrl = ''
			this.selectFileOrNotVideo = false;
			this.selectFileShowVideo = true;
			this.ruleForm.name = ''
		},
		//清空上传控件列表的数据
		clearFilet(val) {
			if (val === 1) {
				this.tailorViews = false
				this.modelView = ''

				this.$refs.uploaderImg.uploader.fileList.splice(0, 1)
				this.$refs.uploaderImg.uploader.files.splice(0, 1)
				this.previewImgURL = this.BASE_URL + this.modelSrc

			} else {
				this.modelView = ''
				this.$refs.uploaderImg.uploader.fileList = []
				this.$refs.uploaderImg.uploader.files = []
			}

			this.selectFileOrNotImg = false

		},
		//图片裁剪后替换原图片
		finish(type) {
			if (type === 'blob') {
				this.$refs.cropper.getCropBlob((data) => {
					// var img = window.URL.createObjectURL(data)
					this.tailorViews = false
				})
			} else {
				this.$refs.cropper.getCropData((data) => {
					// console.info(this.$refs.uploaderImg.uploader )
					this.modelView = this.dataURLtoFile(data, this.$refs.uploaderImg.uploader.fileList[0].name)
					this.$refs.uploaderImg.uploader.fileList[0].file = this.modelView
					this.$refs.uploaderImg.uploader.files[0].file = this.modelView
					this.$refs.uploaderImg.uploader.fileList[0].size = this.modelView.size
					this.$refs.uploaderImg.uploader.files[0].size = this.modelView.size

					this.$refs.uploaderImg.uploader.fileList[0].uniqueIdentifier = this.modelView.size + "-" + this.$refs.uploaderImg.uploader.fileList[0].name;
					this.$refs.uploaderImg.uploader.fileList[0].chunks[0].endByte = this.modelView.size;

					this.modelSrc = data
					this.previewImgUrl = data

					this.tailorViews = false
				})
			}
		},
		//将base64转换为文件
		dataURLtoFile(dataurl, filename) {
			var arr = dataurl.split(','),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([u8arr], filename, { type: mime });

		},
		//表单验证-不能输入小于0的参数
		sumTXT() {
			if (!/^\d+$/.test(this.ruleForm.pauseVal)) {
				this.ruleForm.pauseVal = ''
			}
			if (!/^\d+$/.test(this.ruleForm.creditVal)) {
				this.ruleForm.pauseVal = ''
			}
		},
		//班级
		getUserClass() {
			let success = (res => {
				let data = res.data;
				this.userClass = data;
				// this.ruleForm.class = this.userClass;
			});
			this.$ajax({
				url: 'api/org/class_userid',
				method: 'get',
				params: {
					user_id: this.$g.user_id,
					style: 1,
					data_type: 0
				},
				func: {
					success: success
				}
			})
		},
		initFunc() {
			if (this.compParam.editStatus) {
				this.editFlag = true;
				this.getVideoInfo();
			}
			this.getVideoUpLimit();
		},
		getVideoInfo() {
			this.saveUploading.status = true;
			this.saveUploading.full = true;
			this.saveUploading.txt = "拼命加载...."
			let success = (data => {
				var result = data.data;

				this.ruleForm.id = result.id;
				this.getCheckVideo(result.id); 

				this.ruleForm.name = result.name;
				this.ruleForm.type = result.type;



				this.ruleForm.study_section_id = result.study_section_id;
				this.ruleForm.grade_id = result.grade_id;
				this.ruleForm.subject_id = parseInt(result.subject_id) === 0 ? undefined : result.subject_id;
				this.ruleForm.version_id = parseInt(result.version_id) === 0 ? undefined : result.version_id;
				this.ruleForm.material_id = parseInt(result.material_id) === 0 ? undefined : result.material_id;
				this.ruleForm.list_1_id = parseInt(result.list_1_id) === 0 ? undefined : result.list_1_id;
				this.ruleForm.list_2_id = parseInt(result.list_2_id) === 0 ? undefined : result.list_2_id;
				this.dynamicTags = is_empty(result.keywords) ? [] : result.keywords;


				this.ruleForm.keyword = this.dynamicTags;
				this.ruleForm.profile = result.profile;
				this.ruleForm.notice = result.notice;
				this.ruleForm.is_download = result.is_download;
				this.ruleForm.notice = result.notice;
				this.ruleForm.path = result.path;
				this.ruleForm.authority = result.authority;
				this.ruleForm.create_id = this.$g.user_id;
				this.ruleForm.cate_id = result.cate_id

				if (result.picture != '') {
					this.ruleForm.picture = result.picture;
					this.previewImgUrl = this.BASE_URL + result.picture;
				} else {
					this.compParam.editStatus = false
				}

				this.ruleForm.previewVideoUrl = result.path;
				this.compParam.name = result.name;
				this.compParam.path = result.path;
				this.compParam.play_url = result.pc_play_url;
				this.compParam.thumbnail = result.picture_url;
				this.compParam.length = result.length;

				//
				this.ruleForm.stop_time = result.stop_time;
				this.ruleForm.thumbnail_picture = result.thumbnail_picture

				if (result.stop_time > 0) {
					this.ruleForm.stop_time = 1
					this.pauseVal = result.stop_time;
				}
				// this.pauseVal = result.stop_time
				if (result.study_score > 3) {
					this.creditVal = result.study_score
				} else {
					this.ruleForm.study_score = result.study_score;
				}

				this.ruleForm.class = result.study_class.split(',')

				this.orgLevel3Param.pid = result.study_section_id;
				this.getOrgLevel3();

				this.subjectParam.org_id = result.grade_id;
				this.getSubject();

				this.versionParam.org_id = result.grade_id;
				this.versionParam.sub_id = result.subject_id;
				this.getVersion();

				this.materialParam.org_id = result.grade_id;
				this.materialParam.sub_id = result.subject_id;
				this.materialParam.ver_id = result.version_id;
				this.getMaterial();

				if (parseInt(result.material_id) > 0) {
					this.listParam1.material_id = result.material_id;
					this.getList1();
				}

				if (parseInt(result.list_1_id) > 0) {
					this.listParam2.material_id = result.material_id;
					this.listParam2.pid = result.list_1_id;
					this.getList2();
				}


				this.otherInfo.user_name = result.user_name;
				this.otherInfo.score = result.scores;
				this.otherInfo.favorite_num = result.favs;
				this.otherInfo.comment_num = result.comments;
				this.otherInfo.play_num = result.clicks;
				this.otherInfo.upload_time = result.create_time;



				this.saveUploading.status = false;
				this.saveUploading.full = false;

			})
			let fail = (data => {
				//this.loading.status = false
				this.$message.error(data.msg)
				this.saveUploading.status = false;
				this.saveUploading.full = false;
			})
			//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
			this.$ajax.get('api/video/video', { params: { videoid: this.compParam.id, transform_status: 1 }, func: { success: success, fail: fail } })
		},
		//表单验证
		submitForm(formName) {

			if(this.cNode.length == 0 && this.selectRole.length == 0 && this.selectUser.length == 0) {
        this.ruleForm.limit_type = 1
      }else{
        this.ruleForm.limit_type = this.limitType
        if(this.limitType == 1) {
          this.ruleForm.limit_org_id = ''
          this.ruleForm.limit_role_id = ''
          this.ruleForm.limit_user_id = ''
        }else{
          this.ruleForm.limit_org_id = this.cNode.map(i => i.id).join(',')
          this.ruleForm.limit_role_id = this.selectRole.map(i => i.id).join(',')
          this.ruleForm.limit_user_id = this.selectUser.map(i => i.id).join(',')
        }
      }

			this.$refs[formName].validate((valid) => {
				this.scrollToTop('.is-error')
				if (valid) {
					if (this.pauseVal > 0) {
						this.ruleForm.stop_time = this.pauseVal
					}
					if (this.creditVal > 0) {
						this.ruleForm.study_score = this.creditVal
					}
					this.saveUploading.status = true;
					this.saveUploading.full = true;
					this.saveUploading.txt = "正在保存...."

					if (this.selectFileOrNotVideo || this.selectFileOrNotImg) {
						if (this.selectFileOrNotVideo) {
							this.fileUploadVideo();
						} else {
							this.uploadStatus.video = true;
						}
						if (this.selectFileOrNotImg) {
							this.fileUploadImg();
						} else {
							this.uploadStatus.img = true;
						}
					} else {
						this.saveVideo();
					}

				} else {
					return false;
				}

			});
		},
		saveVideo() {

			let success = (data => {
				this.saveUploading.status = false;
				this.saveUploading.full = false;
				this.$message.success(data.msg);

				if (this.compParam.editStatus === false) {
					// this.$router.push('/teach/video/index');
				} else {
					this.$refs.uploaderVideo.uploader.cancel();
					this.initFunc();
				}
				setTimeout(() => {
					this.$router.push({ path: '/teach/video/index' })
				}, 1000);
			})
			let fail = (data => {
				this.$message.error(data.msg)
				this.saveUploading.status = false;
				this.saveUploading.full = false;
			})
			if (this.compParam.editStatus || this.editFlag) {
				this.ruleForm.id = this.compParam.id;
				this.$ajax.put('api/video/video', this.ruleForm, { func: { success: success, fail: fail } })
			} else {
				this.$ajax.post('api/video/video', this.ruleForm, { func: { success: success, fail: fail } })
			}



		},
		//获取年级
		getOrgLevel3() {
			let success = (data => {
				this.orgLevel3 = data.data;
			})

			if (this.$store.state.isCheckLevel) {

				this.$ajax.get('api/newlevel/platform_org', { params: this.orgLevel3Param, func: { success: success } })
			} else {


				this.$ajax.get('api/org/org', { params: this.orgLevel3Param, func: { success: success } })
			}

		},
		//获取科目
		getSubject() {

			let success = (data => {

				this.orgSubject = data.data;
			})

			if (this.$store.state.isCheckLevel) {
				this.$ajax.get('api/newlevel/platform_subject', { params: this.subjectParam, func: { success: success } })
			} else {
				this.$ajax.get('api/cate/subject', { params: this.subjectParam, func: { success: success } })
			}
		},
		//获取版本
		getVersion() {
			let success = (data => {
				this.orgVersion = data.data;
			})

			this.$ajax.get('api/cate/version', { params: this.versionParam, func: { success: success } })
		},
		//获取教材
		getMaterial() {
			let success = (data => {
				this.orgMaterial = data.data;
			})

			if (this.$store.state.isCheckLevel) {

				this.$ajax.get('api/newlevel/platform_material', { params: this.materialParam, func: { success: success } })
			} else {
				this.$ajax.get('api/cate/material', { params: this.materialParam, func: { success: success } })
			}
		},
		//获取章
		getList1() {
			let success = (data => {
				this.orgList1 = data.data;
			})
			this.$ajax.get('api/cate/cate_list', { params: this.listParam1, func: { success: success } })
		},
		//获取节
		getList2() {
			let success = (data => {
				this.orgList2 = data.data;
			})
			this.$ajax.get('api/cate/cate_list', { params: this.listParam2, func: { success: success } })
		},
		getVideoUpLimit() {
			let success = (data => {
				this.uploadLimitMax = parseFloat(data.data.upload_setting.teacher_max_size);
			})
			this.$ajax.get('api/video/video_setting', { params: this.listParam2, func: { success: success } })
		},
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},
		showInput() {
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		getBytesLength333(string) {
			var totalLength = 0;
			var charCode;
			for (var i = 0; i < string.length; i++) {
				charCode = string.charCodeAt(i);
				if (charCode < 0x007f) {
					totalLength++;
				} else if ((0x0080 <= charCode) && (charCode <= 0x07ff)) {
					totalLength += 2;
				} else if ((0x0800 <= charCode) && (charCode <= 0xffff)) {
					totalLength += 3;
				} else {
					totalLength += 4;
				}
			}
			return totalLength;
		},
		handleInputConfirm() {
			let inputValue = this.inputValue;
			// let len = inputValue.getBytesLength()
			var reg = /^[0-9a-zA-Z]+$/;
			var zh = /^[\u4E00-\u9FA5]+$/;

			if (!is_empty(inputValue)) {

				if (reg.test(inputValue)) {
					if (this.getBytesLength333(inputValue) > 8) {
						this.$message({
							message: '关键词长度不能超过8个字符',
							type: 'warning'
						});
					} else {
						this.dynamicTags.push(inputValue);
						this.ruleForm.keyword = this.dynamicTags

						this.inputVisible = false;
						this.inputValue = '';
					}
				} else if (zh.test(inputValue)) {
					if (this.getBytesLength333(inputValue) > 12) {
						this.$message({
							message: '关键词长度不能超过4个字符',
							type: 'warning'
						});
					} else {

						this.dynamicTags.push(inputValue);
						this.ruleForm.keyword = this.dynamicTags

						this.inputVisible = false;
						this.inputValue = '';
					}
				} else {
					if (this.getBytesLength333(inputValue) > 10) {
						this.$message({
							message: '关键词长度不能超过10个字节',
							type: 'warning'
						});
					} else {

						this.dynamicTags.push(inputValue);
						this.ruleForm.keyword = this.dynamicTags

						this.inputVisible = false;
						this.inputValue = '';
					}
				}
			}
		},

		cancel() {
			this.$router.go(-1)
		},
		//上传成功的事件
		fileSuccessVideo(rootFile, file, message, chunk) {

			var mess = JSON.parse(message);
			mess = handleResponseData(mess)
			if (parseInt(mess.data.status) === 1) {
				this.uploadOrNot = true;

				this.ruleForm.path = mess.data.file_path;
				this.uploadInfo.file_name = mess.data.file_name;
				this.uploadInfo.file_path = mess.data.file_path;
				this.uploadInfo.post_fix = mess.data.post_fix;
				this.ruleForm.thumbnail_picture = mess.data.video_imageD
			} else if (mess.status === 'fail') {
				this.$message.error(mess.msg + ' ' + file.name)
				this.$refs.uploaderVideo.uploader.cancel()
			}
			this.uploadStatus.video = true;
		},
		// 文件进度的回调
		onFileProgress(rootFile, file, chunk) {

			// console.log(rootFile, file, chunk, this.$refs.uploaderVideo.uploader.progress () );
		},
		fileAdded(files, fileList) {
			// console.log('---'+files, fileList, this.fileListArry);
		},
		fileFailVideo(rootFile, file, message, chunk) {
			var mess = JSON.parse(message);

			if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
				let callbcak = data => {
					this.uploadRetryTimes--;
					UploaderVideo.retry(file);
				};
				this.get_access_token(callbcak);

			} else {
				this.$message.error(mess.msg)
				this.saveUploading.status = false;
				this.saveUploading.full = false;
			}
		},
		//过滤文件格式
		fileSubmitVideo(files, fileList, event) {


			for (var i = 0; i < fileList.length; i++) {
				var ext = fileList[i].name.split('.').pop().toLocaleLowerCase();
				var file_type = ['flv', 'mov', 'mkv', 'ts', 'mp4', 'avi', 'mpg', 'wmv'];

				if (!file_type.includes(ext)) {
					this.$message.warning('只支持上传 FLV 、MOV、MKV、TS、MP4、AVI、MPG、WMV 格式视频')
					this.$refs.uploaderVideo.uploader.removeFile(fileList[i]);
				} else if (fileList[i].size === 0) {
					this.$refs.uploaderVideo.uploader.cancel();
					this.$message.error('上传文件大小不能小于0')
					this.selectFileShowVideo = true;
				} else {
					if (this.$refs.uploaderVideo.uploader.fileList.length > 1) {
						//删除第一张图片
						this.$refs.uploaderVideo.uploader.removeFile(this.$refs.uploaderVideo.uploader.fileList[0]);
					}
					this.ruleForm.previewVideoUrl = '111'
					this.uploadInfo.file_size = fileList[i].size;
					this.selectFileOrNotVideo = true;
					this.selectFileShowVideo = false;
					this.ruleForm.name = fileList[i].name.replace(/\.\w+$/, '');


				}
				if (fileList[i].size > this.uploadLimitMax * 1024 * 1024 && this.uploadLimitMax > 0) {
					this.$message.warning('只允许上传' + this.uploadLimitMax + 'M以内的文件');
					this.$refs.uploaderVideo.uploader.removeFile(fileList[i]);
				}

			}



		},

		fileRemovedVideo(file) {
			// this.ruleForm.previewVideoUrl == ''
			this.ruleForm.previewVideoUrl = this.compParam.editStatus ? '111' : '';
			this.selectFileOrNotVideo = false;
			this.selectFileShowVideo = true;
			this.ruleForm.name = ''
			// console.log(this.fileListArry);
		},
		fileUploadVideo() {
			UploaderVideo.resume();
		},
		//上传成功的事件
		fileSuccessImg(rootFile, file, message, chunk) {
			var mess = JSON.parse(message);
			mess = handleResponseData(mess)
			if (parseInt(mess.data.status) === 1) {
				this.ruleForm.picture = mess.data.file_path;
				this.uploadInfo.file_size = file.size;
			} else if (mess.status === 'fail') {
				this.$message.error(mess.msg + ' ' + file.name)
				this.$refs.uploaderImg.uploader.cancel()
			}
			this.uploadStatus.img = true;
		},
		fileFailImg(rootFile, file, message, chunk) {
			var mess = JSON.parse(message);
			if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
				let callbcak = data => {
					this.uploadRetryTimes--;
					UploaderImg.retry(file);
				};
				this.get_access_token(callbcak);
			}
		},
		//过滤文件格式
		fileSubmitImg(files, fileList, event) {

			if (this.$refs.uploaderImg.uploader.fileList.length >= 2) {
				this.$refs.uploaderImg.uploader.fileList.splice(0, 1)
				this.$refs.uploaderImg.uploader.files.splice(0, 1)
			}


			for (let i = 0; i < fileList.length; i++) {
				let matchList = fileList[i].name.toLocaleLowerCase().match(/.+(\.[a-zA-Z]+)/);
				// let fileType = 	matchList?matchList[matchList.length - 1]:"";

				var ext = fileList[i].name.split('.').pop().toLocaleLowerCase();
				var fileType = ['bmp', 'jpg', 'png', 'gif', 'jpeg'];

				if (!fileType.includes(ext)) {
					this.$message.warning('只支持上传bmp/jpg/png/gif/jpeg 格式图片')
					this.$refs.uploaderImg.uploader.removeFile(fileList[i]);
				} else if (fileList[i].size === 0) {

					this.$refs.uploaderImg.uploader.cancel();
					this.$message.error('上传文件大小不能小于0')
					this.selectFileShowImg = true;
				} else if (fileList[i].size > 10480000) {
					this.$message.warning('只允许上传10M以内的文件');
					this.$refs.uploaderImg.uploader.removeFile(fileList[i]);
				} else {
					if (this.$refs.uploaderImg.uploader.fileList.length > 1) {
						//删除第一张图片
						this.$refs.uploaderImg.uploader.removeFile(this.$refs.uploaderImg.uploader.fileList[0]);
					}

					fileList[i].fileType = 'image/png'
					fileList[i].name = fileList[i].name.replace(/\.\w+$/, '.png')
					fileList[i].relativePath = fileList[i].relativePath.replace(/\.\w+$/, '.png')
					this.selectFileOrNotImg = true;
					this.selectFileShowImg = false;
					this.tailorViews = true;
					this.option.img = window.URL.createObjectURL(fileList[i].file)

				}
			}

		},

		fileRemovedImg(file) {
			this.previewImgUrl = '';
			this.selectFileOrNotImg = false;
			this.selectFileShowImg = true;
		},
		fileUploadImg() {
			UploaderImg.resume();
		},
		relateChange(newVal, type) {
			// console.info(obj,dd)
			switch (type) {
				case 'study_section':
					this.ruleForm.grade_id = undefined;
					this.ruleForm.subject_id = undefined;
					this.ruleForm.version_id = undefined;
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgLevel3 = [];
					this.orgSubject = [];
					this.orgVersion = [];
					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];

					this.orgLevel3Param.pid = newVal;
					this.getOrgLevel3();
					break;
				case 'grade':
					this.ruleForm.subject_id = undefined;
					this.ruleForm.version_id = undefined;
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgSubject = [];
					this.orgVersion = [];
					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];


					this.subjectParam.org_id = newVal;
					this.getSubject();

					this.versionParam.org_id = newVal;

					this.materialParam.org_id = newVal;
					break;
				case 'subject':
					this.ruleForm.version_id = undefined;
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgVersion = [];
					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];

					this.versionParam.sub_id = newVal;
					this.getVersion();

					this.materialParam.sub_id = newVal;
					break;
				case 'version':
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];

					this.materialParam.ver_id = newVal;
					this.getMaterial();
					break;
				case 'material':
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgList1 = [];
					this.orgList2 = [];

					this.listParam1.material_id = newVal;
					this.listParam2.material_id = newVal;
					this.getList1();
					break;
				case 'list_1':
					this.ruleForm.list_2_id = undefined;

					this.orgList2 = [];

					this.listParam2.pid = newVal;
					this.getList2();
					break;
				default:
					break;

			}
		}

	},
	mounted() {
		// 获取uploader对象  
		this.$nextTick(() => {
			window.UploaderVideo = this.$refs.uploaderVideo.uploader
			window.UploaderImg = this.$refs.uploaderImg.uploader
		})
	}
}
</script>
<style lang="css">


.cropper_btn {
	background: #fff;
}
.tailoring {
	height: 500px;
}
.tailoring_cropper {
	height: 100%;
}
.tailoring_cropper>div {
	height: 100%;
}
.vue-cropper {
	position: relative;
	width: 100%;
	height: 500px;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	direction: ltr;
	touch-action: none;
	text-align: left;
	background-image: url("");
}
.cropper-box,
.cropper-box-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-face {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	user-select: none;
}
.cropper-box-canvas img {
	position: relative;
	text-align: left;
	user-select: none;
	transform: none;
	max-width: none;
	max-height: none;
}
.cropper-box {
	overflow: hidden;
}
.cropper-move {
	cursor: move;
}
.cropper-crop {
	cursor: crosshair;
}
.cropper-modal {
	background: rgba(0, 0, 0, 0.5);
}
.cropper-crop-box {
	/*border: 2px solid #39f;*/
}
.cropper-view-box {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	outline: 1px solid #39f;
	outline-color: rgba(51, 153, 255, 0.75);
	user-select: none;
}
.cropper-view-box img {
	user-select: none;
	text-align: left;
	max-width: none;
	max-height: none;
}
.cropper-face {
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0.1;
}
.crop-info {
	position: absolute;
	left: 0px;
	min-width: 65px;
	text-align: center;
	color: white;
	line-height: 20px;
	background-color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
}
.crop-line {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.1;
}
.line-w {
	top: -3px;
	left: 0;
	height: 5px;
	cursor: n-resize;
}
.line-a {
	top: 0;
	left: -3px;
	width: 5px;
	cursor: w-resize;
}
.line-s {
	bottom: -3px;
	left: 0;
	height: 5px;
	cursor: s-resize;
}
.line-d {
	top: 0;
	right: -3px;
	width: 5px;
	cursor: e-resize;
}
.crop-point {
	position: absolute;
	width: 8px;
	height: 8px;
	opacity: 0.75;
	background-color: #39f;
	border-radius: 100%;
}
.point1 {
	top: -4px;
	left: -4px;
	cursor: nw-resize;
}
.point2 {
	top: -5px;
	left: 50%;
	margin-left: -3px;
	cursor: n-resize;
}
.point3 {
	top: -4px;
	right: -4px;
	cursor: ne-resize;
}
.point4 {
	top: 50%;
	left: -4px;
	margin-top: -3px;
	cursor: w-resize;
}
.point5 {
	top: 50%;
	right: -4px;
	margin-top: -3px;
	cursor: e-resize;
}
.point6 {
	bottom: -5px;
	left: -4px;
	cursor: sw-resize;
}
.point7 {
	bottom: -5px;
	left: 50%;
	margin-left: -3px;
	cursor: s-resize;
}
.point8 {
	bottom: -5px;
	right: -4px;
	cursor: se-resize;
}

.contentBox { 
	height: 400px;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	padding-top: 10px;
}
.contentBox .leftBox {
	height: 100%;
	width: 47%;
	margin-right: 2%;
}
.leftBox .el-tab-pane {
	padding-left: 10px;
}
.leftBox h4 {
	padding: 0 0 10px 10px;
}
.contentBox .rightBox {
	height: 100%;
	width: 49%;
}
.rightBox h4 {
	padding: 0 0 10px 10px;
}
.rightBox .tagBox {
	height: 90%;
	border: 1px solid #EBEEF5;
	overflow: auto;
}
.tagBox .el-tag {
	margin: 5px 0 0 5px;
}

.allDataBox {
	padding-top: 5px;
}
.allDataBox .chaiBox {
	line-height: 30px;
	width: 99%;
	height: 120px;
	overflow: auto;
	border: 1px solid #dddddd;
}
.chaiBox .el-tag {
	margin-left: 4px;
}
</style>